<template>
	<view>
		<!-- <map style="width: 750rpx; height: 70vh;" id="maps" :longitude="longitude" :latitude="latitude" scale="15"
			:markers="markers"></map> -->
			<!-- 注意此处不能使用原生的地图，需要使用谷歌提供的插件地图 下载引入使用,引入的插件看main.js 记住下载插件之后只用main.js引入就行了 -->
		<GmapMap :center="{lat:latitude,lng:longitude}" :zoom="18" style="width: 750rpx; height: 70vh;">
			<!-- 这个组件为标记点组件 -->
			<GmapMarker :key="index" v-for="(m, index) in markersmp" :position="m.position" @click="center=m.position" />
		</GmapMap>
		
		<view class="bottomcontent ffffff mainpadding">
			<view class="flexaround flexrow">
				<text class="lable2" :class="type==1?'itemfocus2':''" @click="type=1">代驾</text>
				<text class="lable2" :class="type==2?'itemfocus2':''" @click="type=2">顺风车</text>
			</view>
			<view class="margin_top pdl flexbetween" @click.stop="checkstart">
				<view class="flexleft">
					<view class="dian margin_right"></view>
					<input type="text" class="main_size lan_text bold" placeholder="在哪上车？" style="width: 500rpx;"
						disabled v-model="start_address">
				</view>
				<u-icon name="arrow-right" size="16" color="#333"></u-icon>
			</view>
			<view class="margin_top pdl flexbetween" @click.stop="checkend">
				<view class="flexleft">
					<view class="dian margin_right"></view>
					<input type="text" class="main_size lan_text bold" placeholder="您要去哪？" style="width: 500rpx;"
						disabled v-model="end_address">
				</view>
				<u-icon name="arrow-right" size="16" color="#333"></u-icon>
			</view>
			<view class="margin_top pdl flexbetween" @click.stop="messageTime.timeShow = true">
				<view class="flexleft">
					<view class="dian margin_right"></view>
					<input type="text" class="main_size lan_text bold" placeholder="出发时间？" style="width: 500rpx;"
						disabled v-model="cf_time">
				</view>
				<u-icon name="arrow-right" size="16" color="#333"></u-icon>
			</view>
			<view class="margin_top pdl flexleft">
				<view class="dian margin_right"></view>
				<input type="text" class="main_size lan_text bold" placeholder="手机号" style="width: 500rpx;"
					v-model="ccr_mobile">
			</view>
			<view class="submitbtn margin_top5" @click="jiaoche">预估路线</view>
		</view>
		<u-datetime-picker :show="messageTime.timeShow" :minDate="mintime" :maxDate="maxtime" v-model="value1" :title="messageTime.title"
			mode="datetime" @cancel="messageTime.timeShow=false" @confirm="timeConfirm"></u-datetime-picker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	// const QQMapWX = require('@/common/qqmap-wx-jssdk.min.js');
	// // 实例化API核心类
	// const qqmapsdk = new QQMapWX({
	// 	key: 'HBRBZ-AHTE3-RFH3J-35KAR-VJBTV-ZBFZD' // 必填
	// });
	export default {
		data() {
			return {
				latitude: "",
				longitude: "",
				// start_longitude: "113.61332",
				// start_latitude: "34.74821",
				// end_longitude: "113.61872733337405",
				// end_latitude: "34.76323025675951",
				// start_address: "河南省郑州市中原区桐柏北路6号",
				// end_address: "河南省郑州市中原区棉纺西路26-112号",
				// cf_time:"2023-10-28 16:23:01",
				start_longitude: "",
				start_latitude: "",
				end_longitude: "",
				end_latitude: "",
				start_address: "",
				end_address: "",
				cf_time: "",
				messageTime: {
					timeShow: false,
					title: "选择时间（年月日时分）",
					mode: "datetime" //date日期，datetime年月日时分秒，time时间
				},
				value1: Number(new Date()),
				mintime: Number(new Date()),
				maxtime:Number(new Date())+365*24*60*60*1000,
				jxzflag: false,
				ccr_mobile: "",
				type: 1,
				map: null,
				markersmp: []
			}
		},
		mounted() {
			this.getlocation()
		},
		methods: {
			getorderstate() {
				httpRequest.request('/api/order/czOrder', 'GET', {}, false, false, true).then(res => {
					if (res.code == 1) {
						this.jxzflag = true
					} else {
						this.jxzflag = false
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			cunzaidd() {
				uni.navigateTo({
					url: "/pages/webview/webview"
				})
			},
			timeConfirm(e) {
				this.messageTime.timeShow = false
				this.cf_time = this.timereturn(e.value)
			},
			timereturn(time3) {
				//将时间戳格式转换成年月日时分秒
				var date = new Date(time3);
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';

				var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
				var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
				var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
				var strDate = Y + M + D + h + m + s;
				return strDate

			},
			getlocation() {
				let that = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						console.log(res,"定位成功");
						that.latitude = res.latitude
						that.longitude = res.longitude
						that.markersmp.push({position: {
							lat: res.latitude,
							lng: res.longitude,
						}})
					},
					fail(err) {
						console.log(err, "错误");
					}
				});
			},
			jiaoche() {
				if (!httpRequest.checkIsLogin()) {
					uni.reLaunch({
						url: "/pages/login/login"
					})
					return false
				}
				if (this.start_longitude == "") {
					httpRequest.toast("请选择出发地")
					return false
				}
				if (this.end_longitude == "") {
					httpRequest.toast("请选择目的地")
					return false
				}
				if (this.cf_time == "") {
					httpRequest.toast("请选择出发时间")
					return false
				}
				if (this.ccr_mobile == "") {
					httpRequest.toast("请输入手机号")
					return false
				}
				let data = {
					start_longitude: this.start_longitude, //出发地经纬度
					start_latitude: this.start_latitude,
					end_longitude: this.end_longitude, //目的地经纬度
					end_latitude: this.end_latitude,
					start_address: this.start_address, //出发地地址
					end_address: this.end_address, //目的地地址
					cf_time: this.cf_time,
					ccr_mobile: this.ccr_mobile,
					type: this.type
				}
				uni.navigateTo({
					url: "/pages/index/qurendd?msg=" + encodeURIComponent(JSON.stringify(data))
				})

			},
			checkstart() { //选择出发地址
				// if (!httpRequest.checkIsLogin()) {
				// 	uni.reLaunch({
				// 		url:"/pages/login/login"
				// 	})
				// 	return false
				// }
				let _this = this
				uni.chooseLocation({
					success: function(response) {
						_this.start_address = response.address
						_this.start_latitude = response.latitude
						_this.start_longitude = response.longitude
					},
					fail(res) {
						console.log(res, "失败了");
					}
				})
			},
			checkend() { //选择目的地址
				// if (!httpRequest.checkIsLogin()) {
				// 	uni.reLaunch({
				// 		url:"/pages/login/login"
				// 	})
				// 	return false
				// }
				let _this = this
				uni.chooseLocation({
					success: function(response) {
						_this.end_address = response.address
						_this.end_latitude = response.latitude
						_this.end_longitude = response.longitude
						console.log(response);
					},
					fail(err) {

					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pdl {
		padding-bottom: 30rpx;
		/* border-bottom: 1rpx solid rgba(0, 0, 0, .03); */
		border-width: 1rpx;
		border-style: solid;
		border-top-color: #fff;
		border-left-color: #fff;
		border-right-color: #fff;
		border-bottom-color: rgba(0, 0, 0, .03);
	}

	.textcenter {
		text-align: center;
	}

	/* 提交按钮 */
	.submitbtn {
		width: 100%;
		background-color: #42b155;
		border-radius: 50rpx;
		text-align: center;
		color: #fff;
		padding: 20rpx 0;
	}

	.lan_text {
		color: #42b155;
	}

	.main_size {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	.bold {
		font-weight: bold;
	}

	.margin_right {
		margin-right: 30rpx;
	}

	.flexbetween {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.flexleft {
		display: flex;
		align-items: center;
	}

	.flexright {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.flexaround {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.ffffff {
		background-color: #fff;
	}

	.flexrow {
		flex-direction: row;
	}

	.bottomcontent {
		position: fixed;
		/* #ifdef H5 */
		bottom: 150rpx;
		/* #endif */
		left: 0;
		width: 100%;
		z-index: 1000;
		border-radius: 20rpx 20rpx 0 0;
	}

	.lable2 {
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		color: #999;
		font-size: 26rpx;
		text-align: center;
	}

	.itemfocus2 {
		background-color: #42b155;
		border-radius: 50rpx;
		color: #ffffff !important;
	}

	.dian {
		width: 15rpx;
		height: 15rpx;
		background-color: #42b155;
		border-radius: 50rpx;
	}
</style>